<!doctype html>
<html lang="en">
	<head>
		<!--声明当前页面编码集 utf-8 国际编码  GBK gb2312 中文编码-->
		<meta charset="UTF-8">
		<!--网页三要素-->
		<title>同城旅游网选项卡特效</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="描述">
		<!--css层叠样式表 风格 一件美丽的外衣  修饰 装扮-->
		<!--引入样式-->
		<style type="text/css">
		*{margin:0;padding:0;}
		body{background:#8a8a8a;/*背景颜色*/}
		.soso{
			width:490px;/*宽*/
			height:355px;/*高*/
			background:#fff;
			margin-top:50px;
			margin-left:30px;
		}
		.soso ul.nav{
			width:130px;
			height:355px;
			background:#38414c;
			float:left;
		}
		.soso ul.nav li{
			width:130px;
			line-height:44px;
			list-style:none;
			color:#fff;
		}
		.soso ul.nav li.hover{background:#fff;color:#209ef6;}
		/*阿里图标*/
		@font-face {font-family: 'iconfont';
			src: url('iconfont/iconfont.eot'); /* IE9*/
			src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
			url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			url('iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
		}
		.iconfont{
			margin-left:20px;margin-right:10px;
			font-family:"iconfont" !important;
			font-size:16px;font-style:normal;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
		}
		.soso ul.con{
			width:350px;
			height:355px;
			float:right;
			position:relative;/*相对定位*/
		}
        /** 默认内容下的li绝对定位 全部隐藏*/
		.soso ul.con li{
			width:350px;
			height:355px;
			list-style:none;
			position:absolute;/*绝对定位*/
			left:0;top:0;
			display:none;
		}
        /** 内容中的导航栏 */
		.soso ul.con li .nav-top{
			border-bottom:2px solid #666;
			line-height:36px;
			padding-top:10px;
		}
        /** 行内元素没有宽高，但是可以设置边距和填充 */
		.soso ul.con li .nav-top a{
			color:#666;
			text-decoration:none;
			padding:10px 5px;
            background: #fff000;
		}
        /** 导航栏鼠标悬浮 */
		.soso ul.con li .nav-top a.hover{
			border-bottom:2px solid #00cc00;
		}
        /** 表单元素 */
		.soso ul.con li p{
			margin:20px;
		}
		.soso ul.con li p input.text{
			width:288px;
			height:30px;
		}
		.soso ul.con li p input.but{
			width:130px;
			height:36px;
			background:#ff9933;
			border:none;
			color:#fff;
			font-size:20px;
			margin-left:155px;
		}
		
		.soso ul.con li dt{
			color:#666;
			line-height:30px;
		}
		.soso ul.con li dd{
			line-height:25px;
			float:left;
			font-size:12px;
			margin:0 10px;
		}
        /** a标签之间的空格产生原因：a标签换行产生 浮动之后，代码空格原因  */
		</style>
		
	</head>

<body>
	<div class="soso">
		<!--导航-->
		<ul class="nav">
			<li class="hover"><i class="iconfont">&#xe60d;</i>出境游</li>
			<li><i class="iconfont">&#xe626;</i>国内游</li>
			<li><i class="iconfont">&#xe61e;</i>周边游</li>
			<li><i class="iconfont">&#xe634;</i>景点门票</li>
			<li><i class="iconfont">&#xe628;</i>酒店</li>
			<li><i class="iconfont">&#xe626;</i>机票</li>
			<li><i class="iconfont">&#x3447;</i>火车票</li>
			<li><i class="iconfont">&#xec93;</i>邮轮</li>
		</ul>
		<ul class="con">
			<li style="display:block">
				<div class="nav-top">
					<a class="hover" href="">景点</a>
                    <a href="">酒店+景点</a>
                    <a href="">周边跟团游</a>
					<a href="">当地玩乐</a>
				</div>
				<form>
					<p><input class="text" type="text"  placeholder="您想到的地方"/></p>
					<p><input class="but" type="submit" value="搜索" /></p>
				</form>
				<dl>
					<dt>精选主题：</dt>
					<dd>主题乐园</dd>
					<dd>自然风光</dd>
					<dd>水世界</dd>
					<dd>名胜古迹</dd>
					<div style="clear:both"></div>
				</dl>
				<dl>
					<dt>精选主题：</dt>
					<dd>主题乐园</dd>
					<dd>自然风光</dd>
					<dd>水世界</dd>
					<dd>名胜古迹</dd>
					<div style="clear:both"></div>
				</dl>
				<dl>
					<dt>精选主题：</dt>
					<dd>主题乐园</dd>
					<dd>自然风光</dd>
					<dd>水世界</dd>
					<dd>名胜古迹</dd>
					<div style="clear:both"></div>
				</dl>
				
			</li>
			
			<li>
				<img src="images/pic1.png" width="350" height="355" />
			</li>
			<li>
				<img src="images/pic2.png" width="350" height="355" />
			</li>
			<li>
				<img src="images/pic3.png" width="350" height="355" />
			</li>
			<li>
				<img src="images/pic4.png" width="350" height="355" />
			</li>
			<li>
				<img src="images/pic5.png" width="350" height="355" />
			</li>
			<li>
				<img src="images/pic6.png" width="350" height="355" />
			</li>
			<li>
				<img src="images/pic7.png" width="350" height="355" />
			</li>
		</ul>
	</div>
	<!--div : 盒子模型 有宽度 有高度 放置内容的长方形区域
		命名 id="" 身份证 唯一性 精准 不灵活
			class="" 名字 重用 多个 灵活  不精准
	-->
	<script src="js/jquery-2.1.4.js"></script>
	<script>
	var arr =["#209ef6",
			"rgb(80, 180, 0)",
			"rgb(255, 102, 0)",
			"rgb(80, 180, 0)",
			"rgb(255, 102, 0)",
			"rgb(32, 158, 246)",
			"rgb(80, 180, 0)",
			"rgb(15, 197, 204)"]
	$(".soso ul.nav li").click(function(){
		var _index = $(this).index();//获取当前索引
		$(".soso ul.con li").eq(_index).show().siblings().hide();
		$(this).css({color:arr[_index]}).siblings().css({color:"#fff"});
		$(this).addClass("hover").siblings().removeClass("hover");
		

	});
	</script>

</body>
</html>
